<template>
  <view class="member-container">
    <!-- 成员信息 -->
    <view class="section">
      <text class="section-title">成员信息</text>
      <view class="member-list">
        <view class="member-item" v-for="member in memberList" :key="member.id">
          <view class="member-left">
            <image class="member-avatar" :src="member?.userAvatar || '/static/home/defaultPic.jpg'" mode="aspectFit"></image>
            <view class="member-info">
              <text class="member-name">{{ member?.userName }}</text>
              <text class="member-role">{{ MEMBER_ROLE_NAMES[member?.role] }}</text>
            </view>
          </view>
          <view class="action-btn" @click="viewMemberInfo(member)">
            <text class="action-text">查看信息</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 申请加入 -->
    <view class="section" v-if="applyList.length > 0">
      <text class="section-title">申请加入</text>
      <view class="member-list">
        <view class="member-item" v-for="apply in applyList" :key="apply.id">
          <view class="member-left">
			<image class="member-avatar" :src="apply?.userAvatar || '/static/home/defaultPic.jpg'" mode="aspectFit"></image>
            <view class="member-info">
              <text class="member-name">{{ apply?.userName }}</text>
            </view>
          </view>
          <view class="action-btn" @click="handleApply(apply)">
            <text class="action-text">处理申请</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userStore } from '@/utils/userStore.js'
import { memberApi,MEMBER_ROLE_NAMES} from '@/service/api.js'
import { RouterMethods } from '../../utils/router'
const memberList = ref([])
const applyList = ref([])

// 获取成员列表
const fetchMemberList = async () => {
  try {
    const userInfo = userStore.getUserInfo()
    if (userInfo.member.orgId != undefined) {
      const response = await memberApi.getMemberList(userInfo.member.orgId)
      if (response.code === undefined) {
        // 区分正式成员和申请中的用户
		if (response.enabled) {
			memberList.value = response.enabled
		}
		if (response.verifying) {
			applyList.value = response.verifying
		}
      } else {
		throw new Error(response.msg || '获取成员列表失败')
	  }
    }
  } catch (error) {
    console.error('获取成员列表失败:', error)
    uni.showToast({
      title: error.message || '获取成员列表失败',
      icon: 'none'
    })
  }
}

// 查看成员信息
const viewMemberInfo = (member) => {
  RouterMethods.toMyMemberDetail(member.id)
}

// 处理申请
const handleApply = (apply) => {
  RouterMethods.toMyMemberHandle(apply.id)
}

onShow(() => {
  console.log("list----show")
  fetchMemberList()
})
</script>

<style>
.member-container {
  min-height: 100vh;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.section {
  display: flex;
  flex-direction: column;
}

.section-title {
 margin-top: 18rpx;
 margin-left: 38rpx;
 font-family: PingFangSC-Medium;
 font-size: 28rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 500;
 margin-bottom: 18rpx;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.member-item {
  height: 130rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
}



.member-left {
  margin-left: 78rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 1px solid rgba(250,198,83,1);
}

.member-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-name {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  margin-right: 20rpx;
}

.member-role {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 500;
}

.action-btn {
  width: 142rpx;
  height: 44rpx;
  background: #FAC653;
  border-radius: 10rpx;
  margin-right: 78rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action-text {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style>